<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请退订列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style>
        .headerCenter{
            margin-top: 10px;
            margin-left: 20px;
            width: 100%;
        }
        .backColor{
            background-color: #F1F1F1;
        }
        .btnRight{
            float: right;
        }
        .btnLeft{
            float: left;
        }
        .acolor{
            color: #009688;
        }
        .layui-input{
            width: 144%;
        }
        .layui-form-select .layui-input{
            margin-right: 50px;
        }
        .layui-form-select .layui-edge{
            right: -27%;
        }

        .fontsize{
            margin-left: 60px;
        }
        .layui-form-select dl{
            width: 182.88px;
        }
        .default{
            background-color: #009688;
        }
    </style>
</head>
<body>
    <div class="layui-row" >
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    申请退订列表
                    <div class="btnRight" style="margin-bottom: 10px">
                        <button onclick="refresh()" type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-refresh-1"></i>
                            刷新
                        </button>
                        <button onclick="backOff()" type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-return"></i>
                            返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--筛选查询-->
    <div class="layui-row">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询
                    <!--<button onclick="accurate()" class="btnRight layui-btn">
                        <i class="layui-icon layui-icon-down"></i>
                        收起筛选
                    </button>-->
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" >
                        <div class="layui-form-item">
                            <div class="floa">
                                <label class="layui-form-label fontsize">支付渠道：</label>
                                <div class="layui-input-inline inp" style="width: 127px; margin-right: 20px">
                                    <select id="paymentChannel" lay-verify="required" lay-filter="orderPaymentChannel" >
                                        <option value="0">请选择</option>
                                        <option value="2">微信支付</option>
                                        <option value="3">余额支付</option>
                                    </select>
                                </div>
                            </div>
                            <div class="floa">
                                <label class="layui-form-label fontsize">订单来源：</label>
                                <div class="layui-input-inline inp" style="width: 127px; margin-right: 20px">
                                    <select id="orderSource" lay-verify="required" lay-filter="orderSource" >
                                        <option value="0">请选择</option>
                                        <option value="2">小程序</option>
                                        <option value="3">app</option>
                                    </select>
                                </div>
                            </div>
                            <span style="float:right;">
                                <button onclick="selProduct()" type="button" class="layui-btn layui-btn layui-btn-sm">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button onclick="reset()" type="button" class="layui-btn layui-btn-warm layui-btn layui-btn-sm">
                                    <i class="layui-icon layui-icon-refresh-1"></i> 重置
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md11" style="margin-left: 19px">
        <table id="demo" lay-filter="test"></table>
    </div>
    <!--商品id-->
    <input type="hidden" id="proId"/>

    <script>
        /*支付渠道*/
        var orderPaymentChannel;
        /*订单状态*/
        var orderStatus;
        /*订单来源*/
        var orderSource;

        function backOff() {
            var arr = localStorage.getItem("numArr");
            var numArr = arr.split(",");
            numArr.pop();
            window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
            localStorage.setItem("numArr",numArr);
        }

        var form;
        var $;
        var table;
        var layer;
        var upload;
        layui.use(['form','jquery','table','layer','upload'],function() {
            form = layui.form;
            $ = layui.jquery;
            table = layui.table;
            layer = layui.layer;
            upload = layui.upload;
            start(7);
            form.on('select(orderPaymentChannel)', function(data){
                orderPaymentChannel = data.value;
            });

            form.on('select(orderStatus)', function(data){
                orderStatus = data.value;
            });

            form.on('select(orderSource)', function(data){
                orderSource = data.value;
            });
            //$($('#btn > button > span')[0]).text("aass")
        });

        //渲染
        function start(num) {
            $.ajax({
                url:'/ProductOrder/queryOrder',
                dataType:'json',
                data:{"orderStatus":num},
                success:function (data) {
                    data = data.data;
                    startTab(data);
                }
            });
        }

        function startTab(data) {
            table.render({
                elem:'#demo',
                data:data,
                page:true,
                cols:[[
                    {type:'checkbox',fixed:'left'},//复选框靠左
                    {title:'序号',templet:function(data){
                            return data.LAY_TABLE_INDEX+1;
                        }},
                    {field:"nickname",title:"用户昵称",align:'center'},
                    {field:"phone",title:"用户手机",align:'center'},
                    {title:"订单状态",align:'center',templet:function(data){
                            var state = "";
                            if(data.orderStatus == 2){
                                state = "未付款";
                            }else if(data.orderStatus == 3){
                                state = "已付款";
                            }else if(data.orderStatus == 4){
                                state = "代发货";
                            }else if(data.orderStatus == 5){
                                state = "已发货";
                            }else if(data.orderStatus == 6){
                                state = "已签收";
                            }else if(data.orderStatus == 7){
                                state = "退货申请";
                            }else if(data.orderStatus == 8){
                                state = "退货中";
                            }else if(data.orderStatus == 9){
                                state = "已退货";
                            }else if(data.orderStatus == 10){
                                state = "取消交易";
                            }
                            return state;
                        }},
                    {field:"productName",title:"商品名称",align:'center'},
                    {field:"productDescription",title:"商品描述",align:'center'},
                    {field:"regionName",title:"发货地址",align:'center'},
                    {field:"trueName",title:"商家",align:'center'},
                    {title:"操作",align:'center',width:189,templet:function(data){
                            return "<a class='acolor' href='javascript:see("+data.productId+");'>查看</a>  <a class='acolor' href='javascript:delOrder("+data.orderId+");'>删除</a>";
                        }},
                ]]
            });
        }
        //查看
        function see(id) {
            $('#proId').val(id);
            layer.open({
                type:2,
                content:"/OrderModule/commodity-order/OrderItemView.html",
                area:['720px','500px']
            })
        }
        var day = 2;
        //删除
        function delOrder(id) {
            layer.open({
                type: 1,
                content: "<div style='font-size: 20px ; margin:30px  ;'>是否删除此订单?</div>",
                area: ['300px', '200px'],
                btn: ["确定", "取消"],
                yes: function (index, layero) {
                    $.ajax({
                        url: '/ProductOrder/delOrder',
                        dataType: 'json',
                        data: {"orderId": id},
                        success: function (data) {
                            if (data.data) {
                                layer.msg("删除成功");
                                start(7);
                            } else {
                                layer.msg("删除失败");
                            }
                        }
                    });
                }
            });
        }
        //搜索
        function selProduct() {
            $.ajax({
                url:'/ProductOrder/queryOrder',
                dataType:'json',
                data:{
                    "orderPaymentChannel":orderPaymentChannel,"orderStatus":day,"orderSource":orderSource
                },
                success:function (data) {
                    data = data.data;
                    startTab(data);
                }
            });
        }

        //刷新
        function refresh() {
            window.location.reload();
        }
    </script>
</body>
</html>